<template>
  <div>
    <div class="model">
      <el-row :gutter="$store.state.device == 'pc' ? 30 : 0">
        <el-col :span="$store.state.device == 'pc' ? 12 : 24">
          <div class="title">
            <span class="title-inlie">交大要闻</span>
            <a href="https://news.sjtu.edu.cn/index.html" target="_blank">
              <i class="el-icon-plus"></i>
              <span>更多</span>
            </a>
          </div>
          <ul class="newsList">
            <li v-for="(item, index) in news" :key="index">
              <a :href="item.path" target="_blank">{{ item.name }}</a>
            </li>
          </ul>
        </el-col>
        <el-col :span="$store.state.device == 'pc' ? 12 : 24">
          <div class="">
            <div class="title">
              <span class="title-inlie">通知通告</span>
              <a href="https://www.sjtu.edu.cn/tg/index.html" target="_blank">
                <i class="el-icon-plus"></i>
                <span>更多</span>
              </a>
            </div>
            <ul class="newsList">
              <li v-for="(item, index) in notice" :key="index">
                <a :href="item.path" target="_blank">{{ item.name }}</a>
              </li>
            </ul>
          </div>
          <div>
            <div class="title">
              <span class="title-inlie">媒体聚焦</span>
              <a
                href="https://news.sjtu.edu.cn/mtjj/index.html"
                target="_blank"
              >
                <i class="el-icon-plus"></i>
                <span>更多</span>
              </a>
            </div>
            <ul class="newsList">
              <li v-for="(item, index) in media" :key="index">
                <a :href="item.path" target="_blank"
                  ><span class="red">{{ item.fromTo }}</span> {{ item.name }}</a
                >
              </li>
            </ul>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      news: [
        {
          name: "上海交大二〇二一年新年贺词：坚定信心勇担使命 接续奋斗再创辉煌",
          path: "https://news.sjtu.edu.cn/jdyw/20201231/139317.html"
        },
        {
          name: "上海交大二〇二一年新年贺词：坚定信心勇担使命 接续奋斗再创辉煌",
          path: "https://news.sjtu.edu.cn/jdyw/20201231/139317.html"
        },
        {
          name: "上海交大二〇二一年新年贺词：坚定信心勇担使命 接续奋斗再创辉煌",
          path: "https://news.sjtu.edu.cn/jdyw/20201231/139317.html"
        }
      ],
      notice: [
        {
          name: "上海交通大学关于2021年寒假工作安排的通知",
          path: "https://www.sjtu.edu.cn/tg/20210101/139327.html"
        },
        {
          name: "上海交通大学关于2021年寒假工作安排的通知",
          path: "https://www.sjtu.edu.cn/tg/20210101/139327.html"
        },
        {
          name: "上海交通大学关于2021年寒假工作安排的通知",
          path: "https://www.sjtu.edu.cn/tg/20210101/139327.html"
        },
        {
          name: "上海交通大学关于2021年寒假工作安排的通知",
          path: "https://www.sjtu.edu.cn/tg/20210101/139327.html"
        }
      ],
      media: [
        {
          fromTo: "【人民日报】",
          name: "[头版]平凡铸就伟大 英雄来自人民",
          path: "https://news.sjtu.edu.cn/mtjj/20210102/139357.html"
        },
        {
          fromTo: "【人民日报】",
          name: "[头版]平凡铸就伟大 英雄来自人民",
          path: "https://news.sjtu.edu.cn/mtjj/20210102/139357.html"
        },
        {
          fromTo: "【人民日报】",
          name: "[头版]平凡铸就伟大 英雄来自人民",
          path: "https://news.sjtu.edu.cn/mtjj/20210102/139357.html"
        },
        {
          fromTo: "【人民日报】",
          name: "[头版]平凡铸就伟大 英雄来自人民",
          path: "https://news.sjtu.edu.cn/mtjj/20210102/139357.html"
        }
      ]
    };
  }
};
</script>

<style scoped lang="scss">
.model {
  width: $base-width;
  margin: 0 auto;
  background-color: #fcf9f5;
  padding: 8px 12px;
  @media only screen and (min-width: 480px) and (max-width: 1200px) {
    /* 这里写宽度大于321px小于1024px的样式(一般是平板电脑) */
    width: 100%;
  }
  @media screen and (min-width: 320px) and (max-width: 480px) {
    /* 在这里写小屏幕设备的样式 */
    width: 100%;
  }
  .title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    .title-inlie {
      font-size: 14px;
      font-weight: 600;
    }
    a {
      font-size: 10px;
      border-radius: 20px;
      border: 1px solid $base-color;
      color: $base-color;
      transition: 0.3s;
      display: flex;
      justify-content: space-around;
      padding: 5px 10px;
      align-items: center;
      i {
        font-size: 10px;
      }
      &:hover {
        transform: scale(1.05);
      }
    }
  }
  .newsList {
    li {
      // margin-bottom: 5px;
      a {
        font-size: 10px;
        padding: 8px 0;
        line-height: 16px;
        display: block;
        &:hover {
          color: $base-color;
          &::before {
            border-color: $base-color;
          }
        }
        &::before {
          content: " ";
          width: 5px;
          height: 5px;
          border: 1px solid #999999;
          border-radius: 50%;
          display: inline-block;
          margin-right: 5px;
        }
        .red {
          color: $base-color;
        }
      }
    }
  }
}
</style>
